<template>
  <div class="home">
    <!-- 开始  父子组件传值 -->
    <a-button type="primary" size="large">Primary Button</a-button>
    <a-button size="small">test</a-button>
    <Name :name="name" @changeName="changeName" />
    <a-input type="text" v-model:value="newName.name1" />
    <a-input type="text" v-model:value="newName.name2" />

    <div>{{ fullName }}</div>

    <div>
      {{ 'x:' + point.x + 'y:' + point.y }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageTest',
  inheritAttrs: false
}
</script>
<script setup>
import { ref, reactive, provide, computed, watch, watchEffect } from 'vue'
import { useStore } from 'vuex'
import Name from '@/components/name.vue'

import useMousePosition from '@/hooks/useMousePosition'
let point = useMousePosition()

provide('nickName', '疯子')

let newName = reactive({
  name1: '法外狂徒',
  name2: '张三',
  job: {
    work: 'few'
  }
})
const store = useStore()
let name = ref('到南方去')
let age = ref('有一盏灯是河流幽幽的眼睛')

const changeName = () => {
  name.value = '小楼一夜听春雨' + Math.floor(Math.random() * 10)
  age.value = '远方' + Math.floor(Math.random() * 10)
  newName.job.work = '加班' + Math.floor(Math.random() * 10)
  // vuex存在命名空间，函数名需要多加路径
  store.dispatch('user/setName', name.value)
}
const fullName = computed(() => {
  return newName.name1 + '.' + newName.name2
})
// 监听ref定义出来数据
watch(
  [name, age],
  (newVal, oldVal) => {
    console.log(newVal, oldVal, '===>>>>')
  },
  { immediate: true, deep: true }
)

//监听reactive定义
watch([() => newName.name1, () => newName.name2], (newValue, oldValue) => {
  console.log('names改变了', newValue, oldValue)
})
watch(
  () => newName.job.work,
  (newValue, oldValue) => {
    console.log('newName.job', newValue, oldValue)
  }
)
// 监听用到的数据
watchEffect(() => {
  // const one = name.value
  // const two = age.value
  console.log('zhixingle   watchEffect', name.value, age.value)
})
</script>

<style scoped lang="less">
.home {
  text-align: center;
  margin-top: 50px;
}
</style>
